import Head from 'next/head'
import { Row, Col, Breadcrumb, Affix} from 'antd'
import '../public/style/pages/detailed.css'
import Header from '../components/Header'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import Author from '../components/Author'
import { CalendarOutlined, FireOutlined, FolderOutlined } from '@ant-design/icons'

import 'markdown-navbar/dist/navbar.css'
import axios from 'axios'
import servicePath from '../config/apiUrl'

import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import Tocify from '../components/tocify.tsx'


const Detailed = (props) => {
  let markdown='# P01:课程介绍和环境搭建\n' +
  '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
  '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
   '**这是加粗的文字**\n\n' +
  '*这是倾斜的文字*`\n\n' +
  '***这是斜体加粗的文字***\n\n' +
  '~~这是加删除线的文字~~ \n\n'+
  '\`console.log(111)\` \n\n'+
  '# p02:来个Hello World 初始Vue3.0\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n'+
  '***\n\n\n' +
  '# p03:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p04:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '#5 p05:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p06:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p07:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '``` var a=11; ```'


  const tocify = new Tocify()
  
  const renderer = new marked.Renderer()

  renderer.heading = function(text, level, raw) {
    const anchor = tocify.add(text, level)
    return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`
  }

  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    highlights:function(code) {
      return hljs.highlightAuto(code).value
    }
  })

  let html = marked(props.article_content) // 实际接口加载的是props.article_content

  return (
    <div className="container">
      <Head>
        <title>Detailed</title>
      </Head>
      <Header />
      
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={14} xl={12}>
          <div>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item><a href={"/list?id="+props.typeId}>{props.typeName}</a></Breadcrumb.Item>
                <Breadcrumb.Item>{props.title}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className="detailed-title">
                {props.title}
              </div>
              <div className="list-icon center">
                <span>
                  <CalendarOutlined />
                  &nbsp; {props.addTime}
                </span>
                <span>
                  <FolderOutlined />
                  &nbsp; {props.typeName}
                </span>
                <span>
                  <FireOutlined />
                  &nbsp; {props.view_count}人
                </span>
              </div>
              <div className="detailed-content"
                dangerouslySetInnerHTML={{__html:html}}
              >
              </div>
            </div>
          </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={8} lg={4} xl={4}>
          <Author />
          
          <Affix offsetTop={10}>
            <div className="detailed-nav comm-box">
              <div className="nav-title">文章目录</div>
                {tocify && tocify.render()}
            </div>
          </Affix>
        </Col>
      </Row>

      <Footer />

    </div>
  )
}

Detailed.getInitialProps = async (context) => {
  let id = context.query.id
  console.log(id)
  const promise = new Promise((resolve) => {
    axios(servicePath.getArticleById + id)
      .then(res => {
        // console.log(res.data)
        resolve(res.data.data[0])
      })
  })

  return await promise
}

export default Detailed
